<template>
	<view class="">
		<block>
			<view class="navbar f-row">
				<block v-for="(item,idx) in list" :key="idx">
					<view class="navbargator f-g-1 f-y-c" @click="goPage(item,idx)">
						<view class='navbar-view f-c-c'>
							<image mode="aspectFit" v-if="item.iconPath" class="navbar-icon"
								:src="item.pagePath==path?item.selectedIconPath:item.iconPath"></image>
							<view class="navbar-text"
								:style="item.pagePath==path?'color:'+ item.selected_color :'color:'+ item.color">
								{{item.text}}
							</view>
						</view>
					</view>
				</block>
			</view>

		</block>
	</view>
</template>

<script>
	export default {
		name: 'tabbar',
		data() {
			return {
				path: '/pages/banmichaoqiangbizhi/index',
				list: [],

			}
		},
		watch: {
			get_plugin_set: {
				handler: function(newVal, oldVal) {
					if (newVal != 0) {
						this.getTab();
					}
				},
				immediate: true
			}
		},
		methods: {
			getTab() {
				var list = this.get_plugin_set.plugin_tabbar;
				for (var i = 0; i < list.length; i++) {
					list[i]['iconPath'] = this.getImg(list[i]['iconPath']);
					list[i]['selectedIconPath'] = this.getImg(list[i]['selectedIconPath']);
				}
				this.list = list;
				var pages = getCurrentPages()
				let currentRoute = pages[pages.length - 1].route;
				var path = '/' + currentRoute;
				this.path = path.replace('//', '/');
				uni.hideTabBar()
			},
			
			goPage(item, index) {
				if (item.islogin && !uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/banmi/user_login'
					})
					return
				}
				uni.switchTab({
					url: item.pagePath
				})
			},
			getImg(path) {
				if (path.indexOf("http") != -1) {
					return path;
				}
				path = uni.getStorageSync('img_url') + path
				return path
			}
		}
	}
</script>

<style>
	.navbar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 115rpx;
		background: #fff;
		color: #555;
		z-index: 88;
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
	}

	.navbar .navbar-icon {
		width: 36rpx;
		height: 36rpx;
	}

	.navbargator {
		height: 100%;
		width: 1%;
	}

	.f-row {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-flex-direction: row;
		flex-direction: row;
	}

	.navbar-view {
		width: 100%;
		height: 100%;
	}

	.navbar .navbar-text {
		font-size: 22rpx;
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		margin-top: 8rpx;
	}

	.f-c-c {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.f-y-c {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		-ms-grid-row-align: center;
		align-items: center;
	}

	.f-g-1 {
		min-width: 0;
		flex-grow: 1;
		flex-shrink: 1;
	}
</style>